import {WeaCheckbox} from 'ecCom';
import WeaHeader from './WeaHeader';
import isFunction from 'lodash/isFunction';
import {createReplyBottomAtt,imgZoom, createAttachLi} from '../../util/communicationUtil';
import CommunicationRichText from './CommunicationRichText';
import QuoteItem from './QuoteItem';
import ReplyList from './ReplyList';
import {message, Modal} from 'antd';
import {WeaLocaleProvider,WeaAvatar} from 'ecCom';
import * as mobx from 'mobx'
const getLabel = WeaLocaleProvider.getLabel;

class ContentItem extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = {
      edit: false,
      editType: '',
      editValues: {},
      value: '1',
      placeholder: ''
    }
  }
  
  componentDidMount() {
    let dom = ReactDOM.findDOMNode(this);
    imgZoom(dom, ".wea-cl-content");
  }
  
  componentDidUpdate(prevProps, prevState) {
    let dom = ReactDOM.findDOMNode(this);
    imgZoom(dom, ".wea-cl-content");
  }
  
  render() {

    const {approvalAtatus, contentInfo = {}, remark, floorNum, showDate, id, quoteVo, commonList,
      zanCount, batchOperate, checked, hasCoworkHref, coworkid,name, canReply, requestid, hasSubmitRight= false} = this.props;
    const {isAnonymous, isDel, isMeCollected, isMeZaned, istop, isCanAnonymous} = this.props;
    const {relatedaccList4E9 = [], relatedcusList4E9 = [], relateddocList4E9 = [], relatedprjList4E9 = [], relatedwfList4E9 = [], relatemutilprjs4E9 = []} = this.props;
    const { createUserType = '1', createUser } = contentInfo;
    let {edit, editType, editValues} = this.state;
    let headerProps = {diameter: 40, name: contentInfo.createUserName, src: contentInfo.userUrl};
    const replyList = mobx.toJS(contentInfo.replys);
    return (
      <div className="wea-cowork-reply-item">
        {(!edit || editType != 'edit') &&
            <div>
            <div className="cowork-reply-header">
              {createUserType == '1' &&<WeaAvatar ecId={`${this && this.props && this.props.ecId || ''}_WeaAvatar@re7xwewe`} userId={contentInfo.createUser}/>}  
              {createUserType == '2' &&<img src={contentInfo.userUrl} className='content-text-left-user-img' />}
            </div>
            <div className="cowork-reply-content" style={{paddingLeft: '53px'}}>
              <div>
                <span className="cowork-reply-user">
                { createUserType == '1' &&  <a href={`javaScript:openhrm(${contentInfo.createUser});`} onClick={window.pointerXY}>{contentInfo.createUserName}</a>}
                  { createUserType == '2' &&  <a href={`javaScript: window.open('/spa/crm/static/index.html#/main/crm/customerView?customerId=${contentInfo.createUser}&_key=jfzmyh', '_blank')`}>{contentInfo.createUserName}</a>}
                </span>
                <span className="fr">
                  {istop == 1 && <span className="fr-top">Top</span>}
                  {/* {contentInfo.isDelete != 1 && <span className="cowork-top-icon icon-cooperation-follow-o" onClick={this.collect} title={getLabel(28111, '收藏')} />} */}
                  #{contentInfo.flowNum}
                </span>
              </div>
              <div className="cowork-reply-remark">
                {contentInfo.quoteVo && <QuoteItem ecId={`${this && this.props && this.props.ecId || ''}_QuoteItem@3ykyvp`} {...contentInfo.quoteVo}/>}
                <div
                  className="wea-cl-content"
                  dangerouslySetInnerHTML={{__html: `<div class="wea-ckeditor-content">${contentInfo.showRemark}</div>`}}
                />
              </div>
              <div className="workflow-resource-list">
                {createReplyBottomAtt(getLabel(857, '相关文档')+':',contentInfo.relateddocList4E9, ()=>{}, "doc")}
                {createReplyBottomAtt(getLabel(1044, '相关流程') + ':',contentInfo.relatedwfList4E9, ()=>{}, "wf")}
                {createReplyBottomAtt(getLabel(783, '相关客户') + ':',contentInfo.relatedcusList4E9, ()=>{}, "crm")}
                {createReplyBottomAtt(getLabel(782, '相关项目') + ':',contentInfo.relatemutilprjs4E9, ()=>{}, "project")}
                {createReplyBottomAtt(getLabel(33414, '相关任务')+':',contentInfo.relatedprjList4E9, ()=>{}, "task")}
                {createReplyBottomAtt(getLabel(33414, '相关附件')+':',contentInfo.relatedaccList4E9, ()=>{}, "acc")}
                {/* <ul className="cowork-content-public cowork-content-accessory">
                  {contentInfo.relatedaccList4E9.map(createAttachLi)}
                </ul> */}
              </div>
              <div className='bottom-operate'>
                <span className="reply-time">{contentInfo.showDate}</span>
                <div className="fr">
                  {contentInfo.isDelete != 1 && hasSubmitRight && contentInfo.canModify && createBottomOperate(getLabel(93, '编辑'), 'icon-cooperation-edit', this.edit)}
                  {contentInfo.isDelete != 1 && hasSubmitRight && contentInfo.canModify && createBottomOperate(getLabel(91, '删除'), 'icon-cooperation-delete', this.del)}
                  {contentInfo.isDelete != 1 && hasSubmitRight && createBottomOperate(getLabel(19422, '引用'), 'icon-cooperation-Quote', this.quote)}
                  {contentInfo.isDelete != 1 && hasSubmitRight && createBottomOperate(getLabel(675, '评论'), 'icon-coms-New-SMS', this.comment)}
                  {contentInfo.isDelete != 1 && hasSubmitRight && (contentInfo.approved == true ?
                    createBottomOperate(`${getLabel(382631, '已点赞')}(${contentInfo.approveNum})`, 'icon-coms-satisfaction', this.zan):
                    createBottomOperate(`${getLabel(32942, '赞')}(${contentInfo.approveNum})`, 'icon-coms-Good', this.zan))}
                </div>
                <div className="clear-both" />
              </div>
           
              {Array.isArray(replyList) && replyList.length > 0 &&
                <ReplyList 
                  ecId={`${this && this.props && this.props.ecId || ''}_ReplyList@phr8sc`} 
                  appStatus={this.props.appStatus} 
                  requestid={requestid} 
                  contentId={contentInfo.contentId} 
                  operate={this.props.operate} 
                  list={replyList} 
                  submit={this.props.submit} 
                  topdiscussid={id} 
                  isCanAnonymous={isCanAnonymous} 
                  canReply={canReply}
                  hasSubmitRight = {hasSubmitRight}
              />
              }
            </div>
          </div>
        }
        {edit  &&  <CommunicationRichText ecId={`${this && this.props && this.props.ecId || ''}_CommunicationRichText@8vut0r`} appStatus={this.props.appStatus} 
            requestid={requestid}
            hasSubmit={true} 
            ref="richText" 
            submit={this.submit} 
            cancel={this.cancel}
            //  noBottomInfo={editType == 'comment'}
              isCanAnonymous={isCanAnonymous}
              editType={editType}
              {...editValues}
              placeholder={this.state.placeholder}
              />
        }
       
      </div>
    );
  }
  collect = () => {
    this.operate("collect")
  }
  edit = () => {
    const {contentInfo = {}} = this.props
    const {
      relatedaccList4E9 = [], 
      relatedcusList4E9 = [], 
      relateddocList4E9 = [], 
      relatedprjList4E9 = [], 
      relatedwfList4E9 = [], 
      relatemutilprjs4E9 = []
    } = contentInfo;
    this.setState({
      edit: true,
      editType: 'edit',
      editValues: {
        richValue: contentInfo.showRemark,
        relatedaccList4E9,
        relatedcusList4E9,
        relateddocList4E9,
        relatedprjList4E9,
        relatedwfList4E9,
        relatemutilprjs4E9
      }
    });
  }
  del = () => {
    let that = this;
    Modal.confirm({
      content: (
        <div className="wea-list-confirm">
          <p>{getLabel(388758, "确认要删除吗？")}</p>
          {/* <div className="list-confirm-text"><WeaCheckbox onChange={this.valueChange} value={that.state.value}/>{getLabel(4828, '同时删除该帖子的所有评论?','note')}</div> */}
        </div>
      ),
      onOk() {
        let {value} = that.state;
        that.setState({edit : false});
        that.operate("delContent",value);
      }
    });
  }
  valueChange = (value) => {
    this.setState({
      value: value
    });
  }
  approve = () => {
    this.operate("doApproveDiscuss");
  }
  quote = () => {
    this.setState({
      edit: true,
      editType: 'quote',
      placeholder: getLabel('519982', "引用内容")
    });
  }
  comment = () => {
    this.setState({
      edit: true,
      editType: 'comment',
      placeholder:getLabel('519983', "评论内容")
    });
  }
  setTop = () => {
    this.operate("dotop");
  }
  cancelTop = () => {
    this.operate("canceltop");
  }
  zan = () => {
    this.operate("agree");
  }
  //操作类型(dotop:置顶;canceltop:取消置顶;doApproveDiscuss:审批协作留言;collect:收藏;delComment:删除评论;delDiscuss:删除交流;agree:赞)
  operate = (type,value) => {
    isFunction(this.props.operate) && this.props.operate({
      id: this.props.contentInfo.contentId,
      operationType: type
    });
  }
  
  submit = (params, callback) => {
    let { editType } = this.state;
    const { contentInfo } = this.props;
    let saveParams = {...params};
    
    if (editType == 'edit') {
      saveParams.replyType = editType;
      saveParams.contentId = contentInfo.contentId;
    } else {
      saveParams.replyType = editType;
      saveParams.contentId = contentInfo.contentId;
    }
    return isFunction(this.props.submit) && this.props.submit(saveParams, this.cancel.bind(this,callback));
  }
  cancel = (callback) => {
    this.setState({
      edit: false,
      editType: '',
      editValues: {},
      quoteFlag: false
    });
    isFunction(callback) && callback();
  }
  check = (bool) => {
    isFunction(this.props.check) && this.props.check(this.props.id, bool);
  }
}

const createBottomOperate = (text, icon, func) => {
  return (
    <span className="icon" onClick={func}>
      <i className={icon}/>
      <span className="text">{text}</span>
    </span>
  );
}

export default ContentItem;